<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no"/>
<meta name="HandheldFriendly"content="true"/>
<meta http-equiv="x-rim-auto-match" content="none"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no">
<title>支付房租</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="style/css/global.css" rel="stylesheet">
<link href="style/css/common.css" rel="stylesheet">
<!-- <link href="style/css/common_.css" rel="stylesheet"> -->
<script type="text/javascript" src="style/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="style/js/zepto.min.js"></script>
<script type="text/javascript" src="style/js/common.js"></script>

<script src="style/js/mobiscroll.core.js"></script>
<script src="style/js/mobiscroll.frame.js"></script>
<script src="style/js/mobiscroll.scroller.js"></script>

<script src="style/js/mobiscroll.util.datetime.js"></script>
<script src="style/js/mobiscroll.datetimebase.js"></script>
<script src="style/js/mobiscroll.datetime.js"></script>
<script src="style/js/mobiscroll.select.js"></script>



<script src="style/js/mobiscroll.i18n.zh.js"></script>

<link href="style/css/mobiscroll.animation.css" rel="stylesheet" type="text/css" />
<link href="style/css/mobiscroll.frame.css" rel="stylesheet" type="text/css" />
<link href="style/css/mobiscroll.scroller.css" rel="stylesheet" type="text/css" />
<style type="text/css">
	.date_pick_left {
		width: 50%;
		padding: 0 3%;
		height: 2rem;
		line-height: 2rem;
		border: none;
		border-bottom: 1px solid #ccc;
		font-size: .875rem;
	}
	#demo_select_dummy,#select_t_dummy {
		width: 30%;
		padding: 0 3%;
		height: 2rem;
		line-height: 2rem;
		border: none;
		border-bottom: 1px solid #ccc;
		font-size: .875rem;
	}
</style>
<script>
         $(function () {
        		var timer_1;
        		var timer_1_va;
        		var timerYear;
        		var timerMonth;
        		var timerDay;
                $('#demo_timetime').mobiscroll().date({
                    mode: 'scroller', 
                    display: 'modal', 
                    lang:'zh'   ,  
                    minDate: new Date(2015,3,10), 
                    maxDate: new Date(2028,7,30), 
                });
               $('#demo_select').mobiscroll().select({
                    mode: 'scroller',  
                    display: 'modal', 
                    lang:'zh'   
                });
                // $('#timetime_t').mobiscroll().date({
                //     mode: 'scroller', 
                //     display: 'modal', 
                //     lang:'zh'   ,  
                //     // minDate: new Date(2015,3,10), 
                //     maxDate: new Date(2028,7,30), 
                // });
               $('#select_t').mobiscroll().select({
                    mode: 'scroller',  
                    display: 'modal', 
                    lang:'zh'   
                });
               $('#demo_timetime').on('change',function(){
                	timer_1 =$('#demo_timetime').val();
                 	timer_1_va =timer_1.split('/');
                 	timerYear =parseInt(timer_1_va[0],10);
                 	timerMonthr =parseInt(timer_1_va[1],10);
                 	timerDay =parseInt(timer_1_va[2],10);
                 	$('#demo_select_dummy').val('12个月')
                 	$('#timetime_t').mobiscroll().date({
                    mode: 'scroller', 
                    display: 'modal', 
                    lang:'zh'   ,  
                    minDate: new Date(timerYear,timerMonthr-1,timerDay), 
                    maxDate: new Date(2028,7,30), 
                });	
                })
        });
    </script>
<!-- <script type="text/javascript" src="style/js/date.js"></script> -->
</head>

<body>
<div class="wrap">
	<!--头部-->
	<div class="header w_screen">
		<h1 class="title">支付房租</h1>
		<a href="javascript:history.go(-1);" class="btn_left"><span class="ico_back"></span></a>
	</div>

	<!--主体-->
	<div class="main pad_header">
		<div class="top_nav">
			<a class="on" href="#">我有合同</a>
			<a href="#">我没有合同</a>
		</div>
		<div class="form_pay">
			<div class="item_box">
				<div class="item">
					<div class="lab">租期</div>
					<div class="inbox"><!-- <input class="intxt" type="text" value=""> -->
						<input type="text" id="demo_timetime" class ='date_pick_left' / placeholder ='从xx/xx/xx开始'>  
						<select name="Cities" id="demo_select" data-role="none" class='date_pick_right'>
						    <option value="">选择租期</option>
						    <option value="1">1个月</option>
						    <option value="2">2个月</option>
						    <option value="3">3个月</option>
						    <option value="4">4个月</option>
						    <option value="5">5个月</option>
						    <option value="6">6个月</option>
						    <option value="7">7个月</option>
						    <option value="8">8个月</option>
						    <option value="9">9个月</option>
						    <option value="10">10个月</option>
						    <option value="11">11个月</option>
						    <option value="12">12个月</option>
						</select>  
					</div>
					<div class="unit"><span class="ico_date"></span></div>
				</div>
			</div>
			<div class="item_box">
				<div class="item">
					<div class="lab">本次支付</div>
					<div class="inbox"><!-- <input class="intxt" type="text" value=""> -->
						<input type="text" id="timetime_t" class ='date_pick_left' placeholder ='从xx/xx/xx开始'/>  
						<select name="Cities" id="select_t" data-role="none" class='date_pick_right'>
						    <option value="">3个月</option>
						    <option value="1">1个月</option>
						    <option value="2">2个月</option>
						    <option value="3">3个月</option>
						    <option value="4">4个月</option>
						    <option value="5">5个月</option>
						    <option value="6">6个月</option>
						    <option value="7">7个月</option>
						    <option value="8">8个月</option>
						    <option value="9">9个月</option>
						    <option value="10">10个月</option>
						    <option value="11">11个月</option>
						    <option value="12">12个月</option>
						</select>  
					</div>
					<div class="unit"><span class="ico_date"></span></div>
				</div>
				<div class="item">
					<div class="lab">房租金额</div>
					<div class="inbox"><input class="intxt" type="tel" value="" placeholder="请输入房租金额"></div>
					<div class="unit">元</div>
				</div>
			</div>
			<div class="item_box">
				<div class="item">
					<div class="lab">押金</div>
					<div class="inbox"><input class="intxt" type="tel" value="" placeholder="已交可不填"></div>
					<div class="unit">元</div>
				</div>
				<div class="item">
					<div class="lab">水电煤</div>
					<div class="inbox"><input class="intxt" type="tel" value="" placeholder="已交可不填"></div>
					<div class="unit">元</div>
				</div>
			</div>
			<div class="item_box">
				<div class="item">
					<div class="lab">到账时间</div>
					<div class="inbox"><!-- <select class="inselect"><option>普通到账</option></select> -->
						<span class="inselect">
							普通到账
						</span>
					</div>
				</div>
				<div class="notes">房租将在次日到达房东账号，另外房妈妈将会收取1%的服务费</div>
			</div>
			<div class="item_box">
				<div class="item">
					<div class="lab">上传合同</div>
					<div class="inbox"><a class="infile" href="javascript:void(0)"><input type="file" accept="image/*"></a></div>
				</div>
			</div>
		</div>
		<div class="btn_tile">
			<a class="btn pink" href="#">下一步</a>
		</div>
	</div>
</div>

<div class="wrap_bg bg_grey w_screen"></div>
</body>
</html>